<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.myChart);
    let data = [
      [10.0, 8.04],
      [8.07, 6.95],
      [13.0, 7.58],
      [9.05, 8.81],
      [11.0, 8.33],
      [14.0, 7.66],
      [13.4, 6.81],
      [10.0, 6.33],
      [14.0, 8.96],
      [12.5, 6.82],
      [9.15, 7.2],
      [11.5, 7.2],
      [3.03, 4.23],
      [12.2, 7.83],
      [2.02, 4.47],
      [1.05, 3.33],
      [4.05, 4.96],
      [6.03, 7.24],
      [12.0, 6.26],
      [12.0, 8.84],
      [7.08, 5.82],
      [5.02, 5.68],
    ];

    let option = {
      xAxis: {},
      yAxis: {},
      tooltip: {},
      series: [
        {
          symbolSize: 20,
          type: "scatter",
          data,
          // 图形的样式
          // color:"",
          color: {
            // 线性渐变
            type: "linear",
            // 相当于在图形包围盒中的百分比
            // x2反方向 x正方向
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            // 颜色
            colorStops: [
              {
                offset: 0,
                // color: "#00ccff",
                color: "skyblue",
              },
              {
                offset: 1,
                color: "pink",
              },
            ],
          },
          emphasis: {
            itemStyle: {
              borderColor: "rgba(100,200,50,.5)",
              borderWidth: "30",
            },
          },
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid #333;
}
</style>